<template>
  <div class="header">
    <div class="left">
        <h3>叩丁狼管理系统</h3>
        <Icon type="md-apps" @click="handleClick"/>
    </div>
    <div class="right">
      <Dropdown>
        <a href="javascript:void(0)">
          下拉菜单
          <Icon type="ios-arrow-down"></Icon>
        </a>
        <DropdownMenu slot="list">
          <DropdownItem>个人中心</DropdownItem>
          <DropdownItem @click="logout">注销</DropdownItem>
        </DropdownMenu>
      </Dropdown>
    </div>
  </div>
</template>

<script>
import bus from './bus.js';
export default {
  data() {
    return {
      isFlex:false
    };
  },
  methods:{
    handleClick(){
      this.isFlex = !this.isFlex;
      bus.$emit("flexible",this.isFlex)
    },
    logout(){
      localStorage.removeItem("token");
    }
  }
};
</script>

<style lang="less" scoped>
@height:60px;
.header {
  width: 100%;
  height: @height;
  background: lightblue;
  padding:0 20px;
  line-height: @height;
  .left{
    float:left;
      h3{
        display: inline-block;
        margin-right: 10px;
        transition:all 2s;
      }
  }
  .right{
      float:right;
  }
}
</style>
